import React, { memo, useEffect } from 'react'
import { useDispatch, useSelector, shallowEqual } from 'react-redux'
import { IndividuationWrap } from './style'
import { getBanners, getIntroSongs, getPrivate, getNewSongs } from './store/actionCreators'
import AppBanners from '../../components/app-banners/index'
import IntroSongs from '../../components/intro-songs/index'
import AppPrivate from '../../components/app-private/index'
import AppSongs from '../../components/app-songs/index'

export default memo(function Individuation() {
  const dispatch = useDispatch()
  const { banners, introSongs, privateList, newSongs } = useSelector((state) => ({
    banners: state.individuation.banners,
    introSongs: state.individuation.introSongs,
    privateList: state.individuation.privateList,
    newSongs: state.individuation.newSongs
  }), shallowEqual)

  useEffect(() => {
    dispatch(getBanners())
    dispatch(getIntroSongs())
    dispatch(getPrivate())
    dispatch(getNewSongs())
  }, [dispatch])
  // console.log(privateList)
  return (
    <IndividuationWrap>
      <AppBanners banners={banners} />
      <IntroSongs info={introSongs} />
      <AppPrivate info={privateList} />
      <AppSongs info={newSongs} />
    </IndividuationWrap>
  )
})
